<template>
	<view>
		<view class="box-card">
			<!-- 订单总流水 -->
			<view class="pos-a" style="width: 280rpx;height: 80rpx;top: 80rpx;left: 100rpx;">
				<text class="fw c-white" style="font-size: 60rpx;">{{item.allPrice || '0.00'}}</text>
			</view>
			<!-- end -->

			<!-- 会员名片 -->
			<view class="pos-a" style="width: 150rpx;height: 50rpx;bottom: 25px;left: 90rpx;">
				<text class="fw c-white" style="font-size: 40rpx;">{{item.vioPrice || '0.00'}}</text>
			</view>
			<!-- end -->

			<!-- 商会商品 -->
			<view class="pos-a" style="width: 150rpx;height: 50rpx;bottom: 25px;left: 145px;">
				<text class="fw c-white" style="font-size: 40rpx;">{{item.orderPrice || '0.00'}}</text>
			</view>
			<!-- end -->

			<!-- 我的余额 -->
			<view class="pos-a" style="width: 150rpx;height: 50rpx;bottom: 25px;right:0px;">
				<text class="fw c-white" style="font-size: 40rpx;">{{item.myPrice || '0.00'}}</text>
			</view>
			<!-- end -->

		</view>
		<view class="box-data pos-r flex">
			<view class="flex ac" style="height: 100rpx;width: 100%;z-index: 999;">
				<view @click="selectTime(item,index)" v-for="(item,index) in datalist" :key="index"
					class="box-item-data" :class="current == index ? 'itemDataSelect' : 'itemDataNotSelect'">
					<text>{{item.txt}}</text>
				</view>
			</view>
		</view>


		<view class="mt-20">
			<!-- 收益明细列表 -->
			<view class="income-list">
				<!-- 收益明细项 -->

				<view class="income-item" v-for="(item,index) in list" :key="index">
					<view class="item-left">
						<view class="item-title">{{item.bill[0].title || '未知'}}</view>
						<view class="item-time">{{item.create_time || '未知时间'}}</view>
					</view>
					<view class="item-right flex">
						<!-- <text class="minus-amount">-2.79</text> -->
						<text class="plus-amount ml-20">+{{item.bill[0].number || 0}}</text>
					</view>
				</view>

			</view>
		</view>
		
		<!-- 暂无数据显示 -->
		<emptyPage v-if="list.length == 0" title="暂无记录～"></emptyPage>
		<!-- end -->

	</view>
</template>

<script>
	import emptyPage from "@/pages/extend/components/emptyPage.vue";
	import {
		UserComOrderInfo,
		UserComOrderList
	} from '@/api/extend.js';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				item: {},
				options: {},
				current: 0, //默认选择全部
				datalist: [{
					txt: '全部',
					type: 0
				}, {
					txt: '今天',
					type: 1
				}, {
					txt: '昨天',
					type: 2
				}, {
					txt: '斤7日',
					type: 3
				}],
				list: []
			}
		},
		onLoad(options) {
			this.options = options;
			this.UserComOrderInfoFunc();
			this.UserComOrderListFunc();
		},
		methods: {
			UserComOrderListFunc() {
				let type = this.datalist[this.current]['type'];
				UserComOrderList({
					admin_id: this.options.admin_id,
					type: type,
				}).then(res => {
					this.list = res.data;
				})
			},
			UserComOrderInfoFunc() {
				UserComOrderInfo({
					admin_id: this.options.admin_id
				}).then(res => {
					this.item = res.data;
				})
			},
			selectTime(item, index) {
				this.current = index;
				this.UserComOrderListFunc();
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-item-data {
		margin-left: 40rpx;
		line-height: 50rpx;
		border-radius: 20rpx;
		text-align: center;
		width: 100rpx;
		height: 50rpx;
		background-color: #F5F5F5;
		color: #868686;
	}

	.itemDataSelect {
		background-color: #FFEEEC;
		color: #F65236;
	}

	.itemDataNotSelect {
		background-color: #F5F5F5;
		color: #868686;
	}

	.box-card {
		position: relative;
		background-image: url('https://yjgs.jsonbug.com/test/card-shangh.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 99;
		border-radius: 10rpx;
		margin: 20rpx 0rpx 20rpx 10rpx;
		height: 380rpx;
		width: calc(100% - 20rpx);
	}

	.box-data {
		margin-top: -200rpx;
		align-items: flex-end;
		color: white;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 280rpx;
		background-color: #FFFFFF;
	}

	/* 收益明细列表样式 */
	.income-list {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.income-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.item-left {
		flex: 1;
	}

	.item-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.item-time {
		font-size: 24rpx;
		color: #999;
	}

	.item-right {
		font-size: 32rpx;
		font-weight: bold;
	}

	.plus-amount {
		color: #F65236;
	}

	.minus-amount {
		color: #333;
	}

	.flex {
		display: flex;
	}

	.ml-20 {
		margin-left: 20rpx;
	}
</style>